<template>
  <div style="display: flex;height: 100%;width: 100%;flex-direction: column">
    <div  style="display: flex;height: 25%;flex-basis:25%;width: 100%;margin-bottom:30px">
      <el-form :inline="true" :model="formInline" class="demo-form-inline" size="mini">
        <el-form-item label="区划">
          <el-select v-model="formInline.location" placeholder="区划">
            <el-option
              v-for="item in locationOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属水厂">
          <el-select v-model="formInline.waterPlant" placeholder="所属水厂">
            <el-option
              v-for="item in waterPlantOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="站点">
          <el-select v-model="formInline.site" placeholder="站点">
            <el-option
              v-for="item in siteOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="监测因子">
          <el-select v-model="formInline.factor" placeholder="监测因子">
            <el-option
              v-for="item in factorOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="时间">
          <el-date-picker
            v-model="formInline.time"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div id="macarons"  style="display: flex;height: 75%;flex-basis:75%;width: 100%"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "../../dashboard/mixins/resize";

export default {
  name: "waterAnalyse",
  mixins: [resize],
  // props: {
  //   className: {
  //     type: String,
  //     default: 'chart'
  //   },
  //   width: {
  //     type: String,
  //     default: '100%'
  //   },
  //   height: {
  //     type: String,
  //     default: '300px'
  //   }
  // },
  props:['dayProducedWaterQualityMonth'],
  data() {
    return {
      chart: null,
      chartList:[0.8,1.2,1.8,1.5,0.9,1.7],
      formInline:{
        location: undefined,
        waterPlant: undefined,
        site: undefined,
        factor: undefined,
        time: [],
      },
      locationOptions:[{
        label:'阎里乡',
        value:0,
      }],
      waterPlantOptions:[],
      siteOptions:[],
      factorOptions:[],
    }
  },
  watch: {
    // dayProducedWaterQualityMonth(){
    //   this.chartList=[]
    //   for (let i in this.dayProducedWaterQualityMonth){
    //     let list=[]
    //     let length=0
    //     for (let j in this.dayProducedWaterQualityMonth[i]){
    //       length +=1
    //       list.push(this.dayProducedWaterQualityMonth[i][j])
    //     }
    //     if (length <12){
    //       for (let j=0;j<12-length;j++){
    //         list.push(0)
    //       }
    //     }
    //     this.chartList.push(list)
    //   }
    //   // this.chartData=[]
    //   // for (let i in this.waterSoledRatio){
    //   //   this.chartData.push(this.waterSoledRatio[i])
    //   // }
    //   this.initChart()
    // },
    // chartData: {
    //   deep: true,
    //   handler(val) {
    //     this.setOptions(val);
    //   },
    // },
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    // initData(){
    //
    // },
    initChart() {
      if(!this.chart ){
        this.chart = echarts.init(document.getElementById('macarons'), "macarons")
      }
      this.chart.setOption ({
        color: ['rgba(255, 0, 0, 1)','rgba(25, 255, 162, 1)','rgba(255, 218, 51, 1)','rgba(77, 205, 243, 1)',],
        title: {
          text: '聂庄供水站出厂水',
          textStyle: {
            // 其余属性默认使用全局文本样式，详见TEXTSTYLE
            // fontWeight: "bolder",
            fontSize: 12,
            color: "#ffffff",
          },
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: [ 'PH值', '浊度'],
          padding: [0, 0, 0, 0],
          top: 30,
          right: 0,
          textStyle: {
            fontSize: 10,
            color: "#fff", // 设置文本颜色 默认#FFF
          },
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['8-23 13:00:00', '8-23 14:00:00', '8-23 15:00:00', '8-24 13:00:00', '8-24 14:00:00', '8-24 15:00:00'],
            axisLabel: {
              show: true,
              rotate:0,
            },
          }
        ],
        yAxis: {
          type: "value",
          scale:true,
          show:true,
          // name: '温/湿度',
          splitNumber:4,
          // interval:4,
        },
        series: [
          {
            name: 'PH值',
            type: 'line',
            stack: 'Total2',
            smooth: true,
            lineStyle: {
              width: 0
            },
            showSymbol: true,//是否默认展示圆点
            // symbol: 'circle',     //设定为实心点
            symbolSize: 8,   //设定实心点的大小
            itemStyle: {
              normal: {
                color: "rgba(25, 255, 162, 1)", //改变折线点的颜色
                lineStyle: {
                  color: "rgba(25, 255, 162, 1)", //改变折线颜色
                },
              },
            },
            // linePoint:{
            //   show:true,
            //   radius:2,
            //   style:{
            //     fill:'#fff',
            //     lineWidth:1
            //   }
            // },
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgba(25, 255, 162, 0.7)'
                },
                {
                  offset: 1,
                  color: 'rgba(25, 255, 162, 0.3)'
                }
              ])
            },
            emphasis: {
              focus: 'series'
            },
            data:[8.0,8.2,8.1,8.3,8.1,8.3]
          },
          {
            name: '浊度',
            type: 'line',
            stack: 'Total3',
            smooth: true,
            lineStyle: {
              width: 0
            },
            showSymbol: true,
            symbolSize: 8,   //设定实心点的大小
            itemStyle: {
              normal: {
                color: "rgba(255, 0, 0, 1)", //改变折线点的颜色
                lineStyle: {
                  color: "rgba(255, 0, 0, 1)", //改变折线颜色
                },
              },
            },
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgba(255, 0, 0, 0.7)'
                },
                {
                  offset: 1,
                  color: 'rgba(255, 0, 0, 0.3)'
                }
              ])
            },
            emphasis: {
              focus: 'series'
            },
            data: [0.8,1.2,1.8,1.5,0.9,1.7]
          },
        ]
      });
    },
    onSubmit(){

    },
  }
}
</script>
<style lang="scss" scoped>
::v-deep .el-form-item.el-form-item--mini{
  margin-top: 10px;
}
::v-deep .el-form-item__label{
  color:#90b8d9;
}
::v-deep .el-button--primary{
  background-color: #051e39;
  border:2px solid #90b8d9;
  color:#90b8d9
}
::v-deep .el-date-editor .el-range-input{
  background-color: rgba(0,0,0,0);
}
::v-deep .el-date-editor .el-range-separator{
  color:#90b8d9
}
::v-deep .el-input__inner{
  background-color: #0a2356;
  border:2px solid #054a7c;
}
::v-deep .el-select .el-input .el-select__caret{
  color:#00feff;
}
::v-deep .el-select-dropdown__item.hover, .el-select-dropdown__item:hover{
  background-color: rgb(2, 36, 87);
  color: rgb(0, 123, 248);
}
::v-deep .el-popper{
  background-color: rgba(7,37,87,1) !important ;
  border:solid 2px rgb(0,73,157)!important;
}
::v-deep .el-select-dropdown__list{
  background-color: rgba(7,37,87,1) ;
  color:white;
}
::v-deep .el-select-dropdown__empty{
  background-color: rgba(7,37,87,1) ;
  color:white;
}
</style>
